<template>
  <div class="page-login">

    <div class="login-bg-img" :style="{ 'background-image': 'url(' + showData.background + ')' }">
      <div class="login-bg-img-mask"></div>
    </div>
    <div class="login-logo">
      <img v-if="showData.logo" class="login-logo-img" :src="showData.logo" />
    </div>
    <div class="login-main hide-xy flex f-i-c">
      <div class="login-slogan">
        <p class="title">{{ showData.description }}</p>
        <p class="content">{{ showData.slogan }}</p>
      </div>
      <div class="login-form-card" @keypress="loginPress">
        <div class="login-title">
          <span>{{ passModel ? '用户名密码登录' : '企业微信扫码登录' }}</span>
        </div>
        <div class="login-switch">
          <!-- <svg-icon :icon-class="passModel ? 'wx-login' : 'web-login'"></svg-icon> -->
        </div>
        <div v-show="passModel" class="main-area p-6" desc="用户密码登录">
          <div style="height: 30px"></div>
          <div class="normal-input input-all">
            <div class="input-wrapper">
              <img class="prefix-icon icon"
                src=""
                alt="" />
              <input v-model="userInfo.userName" spellcheck="false" type="text" @keypress="loginNamePress"
                :placeholder="$ts(['请输入', '账号'])" />
            </div>
          </div>
          <div class="normal-input input-all mt-20">
            <div class="input-wrapper">
              <img class="prefix-icon icon"
                src=""
                alt="" />
              <input spellcheck="false" ref="passwordInput" v-model="userInfo.password"
                :type="showPwd ? 'text' : 'password'" maxlength="20" @keypress="loginPasswordPress"
                :placeholder="$ts(['请输入', '密码'])" />
            </div>
            <img class="suffix-icon icon pointer" v-if="!showPwd" @click="showPwd = !showPwd"
              src="" />
            <img class="suffix-icon icon pointer" v-else @click="showPwd = !showPwd"
              src="" />
          </div>
          <el-button size="large" class="login-btn mt-20 t-16" @click="login" type="primary" :loading="loading">
            {{ $ts('登录') }}
          </el-button>
          <div class="login-sub-title t-14 mt-30 flex">
            <div class="text-primary pointer" @click="downloadPrint">下载打印插件</div>
            <div class="flex1"></div>
            <div class="text-primary pointer">
              <el-tooltip class="box-item" effect="light" placement="right">
                <template #content>
                  <!-- <img style="width:150px;height:150px" src="../assets/pdaLoadQR.png" alt="" srcset=""> -->
                  <vueQr :text="qrText" :size="200"></vueQr>
                </template>
                <span class="text-primary pointer">下载PDA</span>
              </el-tooltip>
            </div>
          </div>
        </div>
        <div v-show="!passModel" class="main-area pt-30" desc="扫码登录">
          <div id="wxlogin"></div>
        </div>
      </div>
    </div>
    <div class="login-footer">
      <p class="text-center">Copyright © {{showData.copyYear}} {{ showData.copyright }} 版权所有</p>
    </div>
  </div>

</template>

<script>
import { defineComponent, ref, reactive, toRefs, getCurrentInstance, onMounted, nextTick } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import store from '../store/index'
import http from '@/../src/api/http.js'
import lang from '@/components/lang/lang'
import { ElNotification } from 'element-plus'

import vueQr from 'vue-qr/src/packages/vue-qr.vue'
export default defineComponent({
  components: {
    lang,
    vueQr
  },
  setup(props, context) {
    const loading = ref(false)
    const userInfo = reactive({
      userName: '',
      password: '',
      UUID: undefined,
    })
    const passwordInput = ref(null);
    const defaultLogo = new URL('@/assets/imgs/dgz-logo.png', import.meta.url).href
    const defaultBackground = new URL('@/assets/imgs/dgz-bg.jpg', import.meta.url).href
    const showData = ref({
      description: '智能制造运营平台',
      slogan: '支持企业推进数字化转型和智能化升级，提高效率、降低成本，为您带来竞争优势',
      background: '',
      copyright: '',
      logo: '',
      copyYear:"2024-2025"
    })
    let qrText = ref(null)
    let showPwd = ref(false)
    let passModel = ref(true)
    const { proxy } = getCurrentInstance()
    let appContext = getCurrentInstance().appContext
    let $message = appContext.config.globalProperties.$message
    let router = useRouter()
    let $ts = appContext.config.globalProperties.$ts

    const login = () => {
      if (!userInfo.userName) return $message.error($ts(['请输入', '账号']))
      if (!userInfo.password) return $message.error($ts(['请输入', '密码']))
      loading.value = true
      http
        .post('/api/user/login', userInfo, $ts('正在登录') + '....', { noMessage: true })
        .then((result) => {
          ElNotification({
            title: '登录成功',
            message: `欢迎您 ${userInfo.userName}`,
            type: 'success',
            offset: 35,
          })
          store.commit('setUserInfo', result)
          router.push({ path: '/' })
        })
        .catch((err) => {
          $message.error(err.message)
        })
        .finally(() => {
          loading.value = false
        })
    }
    const loginPress = (e) => {
      // if (e.keyCode == 13) {
      //   login()
      // }
    }
    const loginNamePress = (e) => {
      if (e.keyCode != 13) return
      if (userInfo.password) {
        login()
      } else {
        nextTick(() => {
          passwordInput.value?.focus()
        })
      }

    }
    const loginPasswordPress = (e) => {
      if (e.keyCode != 13) return
      login()


    }
    const openUrl = (url) => {
      window.open(url, '_blank')
    }
    const getAppUrl = () => {
      http.get('api/Bas_Version/GetCurApkPkg').then(r => {
        if (!!r) {
          qrText.value = r?.PkgUrl ?? '暂未获取下载地址'
        }
      })
    }
    getAppUrl()

    const getSystemInfo = () => {
      let data = {
        module: 1
      }
      http.get('api/Bas_Parameter/GetParamerIniByModule', data).then(r => {
        if (!!r) {
          let logo = r.find(i => i.ParamName == 'system_logo')
          let bg = r.find(i => i.ParamName == 'system_login_bg')
          let copyright = r.find(i => i.ParamName == 'copyright')
          let copyYear = r.find(i => i.ParamName == 'copyYear')
          showData.value.logo = logo?.ParamValue || defaultLogo
          showData.value.copyright = copyright?.ParamValue || "安徽大工造"
          showData.value.copyYear = copyYear?.ParamValue || "2024-2025"
          showData.value.background = bg?.ParamValue || defaultBackground
        }
      })
    }
    getSystemInfo()
    const downloadPrint = () => {
      window.open('http://124.222.220.210:9100/Upload/Tools/DgzImpTools.msi', '_blank')
    }
    return {
      loading,
      userInfo,
      showData,
      showPwd,
      passModel,
      qrText,
      passwordInput,
      loginPress,
      openUrl,
      login,
      downloadPrint,
      loginNamePress,
      loginPasswordPress
    }
  },
  directives: {
    focus: {
      inserted: function (el) {
        el.focus()
      },
    },
  },
})
</script>

<style lang="less" scoped>
body {
  min-height: 600px;
}

.page-login {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.login-bg-img {
  position: fixed;
  width: 100%;
  height: 100%;
  background-position: center;
  background-color: #f7f7f7;
  background-size: cover;
  background-attachment: fixed;
  z-index: -1;

  .login-bg-img-mask {
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, .5);
    backdrop-filter: saturate(100%) blur(1px);
    -webkit-backdrop-filter: saturate(100%) blur(1px);
  }
}

.login-logo {
  width: 100%;
  min-height: 76px;
  padding-top: 30px;
  box-sizing: border-box;
  .login-logo-img {
    margin-left: 10%;
    max-height: 46px;
  }
}

.login-slogan {
  height: 100%;
  margin: 60px 60px 0 200px;
  color: #FFF;
  text-align: left;

  .title {
    font-size: 2.6rem;
    line-height: 1.8;
    font-weight: 600;
    margin: 0;
    text-shadow: 3px 3px 4px rgba(0, 0, 0, 0.2);
  }

  .content {
    font-size: 1.6rem;
    line-height: 1.8;
    font-weight: 520;
    margin: 0;
    text-shadow: 3px 3px 4px rgba(0, 0, 0, 0.2);

  }
}

.login-main {
  flex: 1;
  width: 100%;
  // max-width: 1200px;
  z-index: 99;
  margin: 0 auto;

  .login-form-card {
    //margin:100px auto;
    margin-left: auto;
    margin-right: 200px;
    max-width: 500px;
    border-radius: 6px;
    background: #fff;
    padding: 60px;
    position: relative;

    .login-switch {
      width: 53px;
      height: 53px;
      position: absolute;
      right: 10px;
      top: 10px;
      cursor: pointer;
      z-index: 120;

      .svg-icon {
        width: 52px;
        height: 52px;
      }
    }

    .login-title {
      padding-bottom: 20px;
      border-bottom: 1px solid #eeeeee;
      font-weight: 500;
      font-size: 1.2rem;
    }
  }
}

.login-footer {
  width: 100%;
  font-size: 14px;
  color: #aaaaaa;
  padding-bottom: 20px;
}

.normal-input {
  width: 100%;
  border: 1px solid rgb(220, 222, 230);
}

.input-all {
  box-sizing: content-box;
  position: relative;
  height: 42px;
  padding: 6px 0;
  border-radius: 6px;
  background-color: white;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  justify-content: space-between;
  transition: 200ms;
}

.input-all .input-wrapper {
  padding: 0 6px;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  width: 100%;
}

.input-all .icon {
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  transition: 200ms;
}

.input-all .prefix-icon {
  opacity: 0.4;
  margin-left: 10px;
  margin-right: 12px;
  width: 25px;
  height: 25px;
}

.input-all .suffix-icon {
  margin-right: 10px;
}

.input-all input {
  width: 100%;
  height: 100%;
  outline: none;
  border: none;
  background-color: white;
  font-size: 18px;
  line-height: 18px;
  transition: 200ms;
}

.input-all:focus-within input {
  background-color: rgb(245, 250, 255);
}

.input-all:focus-within {
  background-color: rgb(245, 250, 255);
  border-color: transparent !important;
}

.normal-input:focus-within {
  box-shadow: 0 0 0 2px #7300e6;
}

.login-btn {
  width: 100%;
  height: 48px;
}

.main-area {
  min-width: 320px;
  overflow: hidden;
  text-align: center;
}

.text-center {
  text-align: center;
}
</style>
